<template>
  <div class="page">
    <!-- 修改组件样式
    1 直接添加类名 使用类名进行修改
    2 组件默认自己带类名(标签名)  如果有多个同名组件的话 就不推荐了
    -->
    <el-card class="login-card">
      <template #header>
        <!-- 增大标题文字尺寸 -->
        <h2 class="login-title">黑马面经运营后台</h2>
      </template>

      <el-form ref="form" :model="form" :rules="rules" label-position="top">
        <!-- 账号输入区域，增大间距提升视觉体验 -->
        <el-form-item label="账号:" prop="userName" class="form-item-spacing">
          <el-input v-model.trim="form.userName" placeholder="请输入账号" size="large"></el-input>
        </el-form-item>
        <!-- 密码输入区域，增大间距提升视觉体验 -->
        <el-form-item label="密码:" prop="password" class="form-item-spacing">
          <el-input v-model.trim="form.password" placeholder="请输入密码" size="large" show-password></el-input>
        </el-form-item>

      <!-- 按钮区域，优化间距和对齐方式 -->
      <el-form-item class="form-buttons">
        <el-button type="primary" size="large" @click="login">登录</el-button>
        <el-button size="large" @click="resetForm">重置</el-button>
      </el-form-item>

    </el-form>

    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MyLogin',
  data () {
    return {
      form: {
        userName: '',
        password: ''
      },
      /* 表单校验3要素
      1 绑定ELement组件自定义的model属性 绑定为数据中 from 对象  绑定校验规则 :rules="rules"
      2 给el-form-item添加prop属性 来指定校验规则
      3 input 输入框 绑定数据即可
      */
      rules: {
        // 变量名字和要el-form-item的prop属性值要一致
        // trigger 用于指定触发校验的时机，blur 表示在输入框失去焦点时触发，change 表示在输入内容变化时触发
        // Type  类型  关于校验邮箱以及其他的时候 ELement 使用的是 async-validator  (https://github.com/yiminghe/async-validator)
        userName: [{
          required: true,
          message: '请输入账号',
          trigger: 'blur'
        }, // 正则校验  必须是字母或者数字
        {
          pattern: /^[a-zA-Z0-9]+$/,
          message: '账号必须是字母或数字',
          trigger: 'blur'
        },
        {
          min: 5,
          max: 12,
          message: '账号长度在 5 到 12 个字符',
          trigger: 'blur'
        }

        ],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          pattern: /^[a-zA-Z0-9]+$/,
          message: '密码必须是字母或数字',
          trigger: 'blur'
        },
        {
          min: 5,
          max: 12,
          message: '密码长度在 5 到 12 个字符',
          trigger: 'blur'
        }

        ]
      }
    }
  },
  methods: {
    async login () {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '登录失败',
            duration: 4500,
            showClose: true
          })
          return
        }

        try {
          //  loginActions 返回的是 是否成功的一个对象 借用此对象来实现登录成功后跳转到首页  以及错误提示
          const result = await this.$store.dispatch('user/loginActions', {
            username: this.form.userName,
            password: this.form.password
          })

          if (result.success) {
            // 登录成功
            this.$message({
              type: 'success',
              message: '登录成功',
              duration: 4500,
              showClose: true
            })
            // 登录成功后 跳转到首页
            this.$router.push('/')
          } else {
            // 登录失败（包括网络错误、API错误等）
            this.$message({
              type: 'error',
              message: '检查账号或密码',
              duration: 4500,
              showClose: true
            })
          }
        } catch (error) {
          // 捕获其他可能的错误
          this.$message({
            type: 'error',
            message: '登录失败',
            duration: 4500,
            showClose: true
          })
        }
      })
    },

    resetForm () {
      // 不能简单的使用将账密清空 还需要将校验提示清除呢 所以我们需要使用组件自己封装的 this.$refs.form.resetFields() 方法
      this.$refs.form.resetFields()
    }
  }
}
</script>
<!-- scoped  只在当前组件生效  因为el-card本身就是一个组件 所以不生效 我们使用类名穿透(深度作用选择器)的方式修改其样式，例如在scss中使用 ::v-deep 或者 >>> 来实现。
less:   /deep/
scss:  ::v-deep
-->
<style lang="scss" scoped>
/*
登录卡片样式优化
增大整体尺寸、优化边距和圆角，提升视觉体验
*/

.page{
      width: 100vw;
      height: 100vh;
      background: url('@/assets/karina2.png') center/cover no-repeat;
      position: relative;
      overflow: hidden;
      &::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        backdrop-filter: blur(1px);

      }
}
.login-card {
  width: 42vw;
  margin: 120px auto;
  border-radius: 12px;
  /* 添加半透明背景和毛玻璃效果 */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);

  ::v-deep .el-card__header {
    color: white;
    text-align: center;
    padding: 20px 24px;
    border-radius: 12px 12px 0 0;
    backdrop-filter: blur(1px);
  }

  /* 卡片内容区域样式优化 */
  ::v-deep .el-card__body {
    padding: 32px 40px;
    background: transparent; /* 确保内容区域透明 */
  }
}

/* 增强页面背景的模糊效果 */
.page::before {
  backdrop-filter: blur(3px); /* 增加背景模糊度 */
}

/* 优化输入框和按钮的透明度 */
::v-deep .el-input__inner {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

::v-deep .el-button {
  background: rgba(255, 200, 150, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.login-title {
  font-size: 24px; /* 增大标题文字尺寸 */
  font-weight: 600; /* 加粗字体 */
  margin: 0;
  letter-spacing: 1px; /* 增加字间距 */
}

/* 表单项间距优化 */
.form-item-spacing {
  margin-bottom: 28px;
}

/* 表单标签样式优化 - 增大文字尺寸 */
::v-deep .form-item-spacing .el-form-item__label {
  font-size: 16px; /* 增大标签文字尺寸 */
  font-weight: 500; /* 中等粗细 */
  margin-bottom: 12px; /* 增大标签与输入框间距 */
  color: #303133; /* 优化文字颜色 */
}

/* 输入框样式优化 - 增大文字尺寸 */
::v-deep .el-input__inner {
  font-size: 16px; /* 增大输入框文字尺寸 */
  height: 44px; /* 增大输入框高度 */
  padding: 0 16px; /* 增大输入框内边距 */
}

/* 按钮区域样式优化 */
.form-buttons {
  margin-top: 36px; /* 增大按钮区域上边距 */
  text-align: center;

  /* 按钮间距优化 */
  .el-button {
    font-size: 16px; /* 增大按钮文字尺寸 */
    padding: 12px 32px; /* 增大按钮内边距 */
    margin: 0 8px; /* 优化按钮间距 */
  }
}

/* 响应式优化 - 小屏幕适配 */
@media screen and (max-width: 480px) {
  .login-card {
    width: 90%; /* 小屏幕下减小宽度占比 */
    margin: 80px auto; /* 调整上下边距 */
  }
}
</style>
